import { Button, Card, message, Pagination, PaginationProps, Space, Table } from 'antd'
import { SizeType } from 'antd/lib/config-provider/SizeContext'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import trademarkApi, { recordsModel } from '@/api/project'
import Modal from './components/index'
export default function Product() {
  const [size, setSize] = useState<SizeType>('large')
  // 当前页
  let [current, setCurrent] = useState<number>(1)
  // 总条数
  let [total, setTotal] = useState<number>(10)
  // 每页几条
  let [pageSize, setPageSize] = useState<number>(5)
  // 数据
  let [trademarkList, setTrademarkList] = useState<recordsModel[]>([])
  // 模态框显示
  let [modal, setModal] = useState<boolean>(false)
  let initModal = () => ({ id: 0, tmName: '', logoUrl: '' })
  const [trademark, setTrade] = useState<recordsModel>(initModal())
  const showTotal: PaginationProps['showTotal'] = (total) => `共 ${total} 条`
  // 获取品牌列表
  async function getTrademarkList() {
    let result = await trademarkApi.reqTrademark(current, pageSize)
    setCurrent(result.current)
    setTotal(result.total)
    setTrademarkList(result.records)
  }
  // 点击添加按钮
  const addModal = () => {
    showModal(true)
  }
  // 删除按钮
  const deleteOne = (trademark: recordsModel) => {
    return async () => {
      try {
        await trademarkApi.deleteTrademark(trademark.id)
        message.success('删除成功')
      } catch (error) {
        message.error('删除失败')
      } finally {
        getTrademarkList()
      }
    }
  }
  const showModal = (showM: boolean) => {
    setModal(showM)
  }

  useEffect(() => {
    getTrademarkList()
  }, [current, pageSize])
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      width: 80,
      align: 'center',
      render(value, row, index) {
        return index + 1
      }
    },
    {
      title: '品牌名称',
      dataIndex: 'tmName',
      width: 383
    },
    {
      title: '品牌LOGO',
      width: 350,
      dataIndex: 'logoUrl',
      render(a, b) {
        return <img src={a} alt="" width={100} height={87} />
      }
    },
    {
      title: '操作',
      render(row) {
        return (
          <Space>
            <Button
              type="primary"
              onClick={() => {
                setTrade(row)
                setModal(true)
              }}
              icon={<EditOutlined />}
            >
              编辑
            </Button>
            <Button type="primary" onClick={deleteOne(row)} danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Space>
        )
      }
    }
  ]
  return (
    <div>
      <Card
        size="small"
        title={
          <Button type="primary" size={size} onClick={addModal}>
            添加品牌
          </Button>
        }
        style={{ width: 1200 }}
      >
        <Table
          bordered
          columns={columns}
          dataSource={trademarkList}
          rowKey="id"
          pagination={{
            showTotal,
            current,
            total,
            pageSize,
            pageSizeOptions: [5, 10, 15],
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: (page: number, pageSize: number) => {
              // 重复当前页
              setCurrent(page)
              setPageSize(pageSize)
            }
          }}
        />
        <Modal showModal={showModal} modal={modal} getTrademarkList={getTrademarkList} trademark={trademark} />
      </Card>
    </div>
  )
}
